<!--  -->
<template>
 <div class="leftMian">
    <ul>
        <li v-for="(item,index) in todolist" :id="item.id" @click= "current=index":class="{on:current==index?true:false}":fid="item.fid">
          <a>{{item.name}}<i :class="item.iconname" style="margin-left:3px"></i></a>
        </li>
    </ul>
</div>
</template>

<script>
export default {
  data () {
    return {
        current:0,
        
        todolist:[
            {fid:1,
            name:"收件箱",
            id:"mailList",
            iconname:"el-icon-message"
            },
            {fid:2,
            name:"草稿箱",
            id:"mailDraft",
            iconname:"el-icon-info"
            },
            {fid:3,
            name:"已发送",
            id:"mailSend",
            iconname:"el-icon-news"
            },
            {fid:4,
            name:"垃圾箱",
            id:"mailRubbish",
            iconname:"el-icon-delete"
            },
            {fid:5,
            name:"vip邮件",
            id:"mailVip",
            iconname:"el-icon-warning"
            },
            {fid:6,
            name:"智能邮件",
            id:"mailInte",
            iconname:"el-icon-edit-outline"
            },
            {fid:7,
            name:"订阅邮件",
            id:"mailBook",
            iconname:"el-icon-star-on"
            },
             {fid:8,
            name:"发票邮件",
            id:"mailinvoice",
            iconname:"el-icon-view"
            },
             {fid:9,
            name:"邀请邮件",
            id:"mailMeeting",
            iconname:"el-icon-bell"
            },
            {fid:10,
            name:"其他邮件",
            id:"mailOthers",
            iconname:"el-icon-edit"
            },
        ],
      
    };

  },
  methods:{
    
  }
}

</script>
<style  scoped>
.leftMian {
  float: left;
  margin-top: 40px;
  background: blue;
}
.leftMian ul {
  margin-bottom:-1px;
  border-right: #000 1px solid;
}
.leftMian ul li{
  border-bottom: #000 1px solid;
  padding:10px;
  background: aliceblue;
}
.leftMian ul .on {
  background: red;
}
.leftMian ul li a {
  display: block;
  height:40px;
  padding:5px;
  color:#222;
  font:normal 16px/40px Microsoft YaHei;
  text-align: center;
}
</style>